<template>
  <WidgetContainer :widget-id="config.id">
    <FormItemWidget :config="config" :rowIndex="rowIndex" :parentId="parentId">
      <el-upload :action="uploadApi" :headers="requestHeaders" :limit="config.attributes.limit"
        :accept="config.attributes.accept" :disabled="config.attributes.disabled"
        :list-type="config.attributes.listType || 'text'" :file-list="fieldValue" :on-remove="handleRemove"
        :on-success="handleSuccess" :on-preview="handlePreview" @change="handleChange" :class="uploadClass"
        class="upload-box">
        <el-button plain style="margin-top: 10px;" :icon="UploadFilled" v-if="!fieldValue || fieldValue.length < config.attributes.limit" type="primary"
          :disabled="config.attributes.disabled">点击上传</el-button>
      </el-upload>
    </FormItemWidget>
  </WidgetContainer>
</template>

<script setup>
import { ElUpload, ElButton } from 'element-plus'
import { inject, onMounted, computed } from 'vue'
import { executeEventHandler } from '@/utils/eventExecutor'
import { useFieldBinding } from '@/utils/useFieldBinding'
import { UploadFilled } from '@element-plus/icons-vue'

const formData = inject('formData')
const widgetList = inject('widgetList')
const formConfig = inject('formConfig')

const props = defineProps({
  config: Object,
  rowIndex: Number,
  parentId: String
})

const { fieldValue } = useFieldBinding(formData, props.config, {
  rowIndex: props.rowIndex,
  parentId: props.parentId
})

const uploadClass = computed(() => {
  const base = (fieldValue.value?.length >= props.config?.attributes?.limit || formConfig.value?.disabled || props.config?.attributes?.disabled)
    ? ['removeUpload']
    : []
  const extra = props.config?.attributes?.cssClass
  if (Array.isArray(extra)) return [...base, ...extra]
  if (typeof extra === 'string') return [...base, extra]
  return base
})

const uploadApi = inject('uploadApi')
const requestHeaders = inject('requestHeaders')

const handleSuccess = (response, file, fileList) => {
  if (fieldValue.value == null || fieldValue.value == '') {
    fieldValue.value = []
  }
  let url = response.data.url || response.data.src || response.url || response.src// 匹配多种后端返回格式
  let name = response.data.name || response.name || file.name
  file.url = url
  fieldValue.value = [...fieldValue.value, { name, url }]
}

const handleRemove = (uploadFile, fileList) => {
  console.log(uploadFile)
  const newList = fieldValue.value.filter(file => file.url !== uploadFile.url)
  fieldValue.value = newList
}

const handlePreview = (file) => {
  window.open(file.url)
}

onMounted(() => {
  executeEventHandler(props.config.events?.onMounted,
    { widgetConfig: props.config, formData: formData.value, widgetList: widgetList.value }
  )
})

const handleChange = (value) => {
  executeEventHandler(props.config.events?.onChange,
    { widgetConfig: props.config, formData: formData.value, widgetList: widgetList.value, value }
  )
}
</script>
<style>
.removeUpload .el-upload--text {
  display: none;
}

.upload-box {
  width: 100%;
  border: 1px dashed var(--el-border-color);
  padding: 0px 10px;
}

.el-upload-list--picture-card .el-upload-list__item {
  width: 110px;
  height: 110px;
}

.el-upload--picture-card {
  width: 110px;
  height: 110px;
  line-height: 110px;
}
</style>